<script>
/**
 * 大屏主页面
 * 采用缩放的形式进行适配，搭配rem的话很方便实用
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
    onBeforeUnmount,
} from 'vue';
import ViewHead from './components/viewHead.vue';
import img_1 from './assets/bg.png';
import img_2 from './assets/1-1-bg.png';
import top_1 from './components/top_1.vue';
import top_2 from './components/top_2.vue';
// import Box_5 from './components/box_5.vue';
import { setRem } from '@/common/rem.js';
import { name } from 'file-loader';
import api from '@/http/public.js';
export default defineComponent({
    name: 'BigScreenView',
    components: {
        ViewHead,
        top_1,
        top_2,
    },
    setup() {
        const ViewRef = ref(null);
        const topOne = ref({ name: ['光热发电站(MW)', '光伏发电站(MW)', '风电场(MW)', '电化学储能(MW)', '发电计划(MW)'], data: [], xData: ['0h', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h',] })
        const topTwo = ref({ name: ['光热发电站(MW)', '光伏发电站(MW)', '风电场(MW)', '电化学储能(MW)', '发电计划(MW)'], data: [], xData: ['15min', '30min', '45min', '60min'] })
        const dataInfo1 = ref({ color: ['#4cdbfe'], name: ['多能互补系统电价'], data: [], xData: ['0h', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h',] })
        const dataInfo2 = ref({ color: ['#4cdbfe'], name: ['风电电价'], data: [], xData: ['0h', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h',] })
        const dataInfo3 = ref({ color: ['#4cdbfe'], name: ['光伏电价'], data: [], xData: ['0h', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h',] })
        const dataInfo4 = ref({ color: ['#4cdbfe'], name: ['光热电价'], data: [], xData: ['0h', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h',] })
        const dataInfo5 = ref({ color: ['#4cdbfe'], name: ['电化学储能电价'], data: [], xData: ['0h', '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20h', '21h', '22h', '23h',] })
        const dataContainer = reactive({
            loading: false,
            img: {
                img_1,
                img_2,
            },
        });


        /** 是否是文档上 */
        function isActive() {
            if (!ViewRef.value) return false;
            return ViewRef.value.getRootNode() === document;
        }
        /**
         * 计算rem
         *  */
        function computeRem() {
            if (!ViewRef.value) return;
            if (!isActive) return;
            let rect = ViewRef.value.getBoundingClientRect();
            let baseSize = 16; //基础大小，1倍率相当于1rem = 16像素
            let scale = rect.width / 1920;
            let fontSize = Math.round(baseSize * scale * 100) / 100 + 'px';
            /**
             * 计算缩放倍数 1920 * 1080
             * 根据设计图自己配置
             *  */
            setRem(fontSize);
        }
        function hrefGo(href) {
            window.open(href, '_blank');
        }
        onMounted(() => {
            computeRem();
            const newTime = new Date()
            dataContainer.times = newTime.getFullYear() + '-' + String(newTime.getMonth() + 1).padStart(2, '0') + '-' + String(newTime.getDate()).padStart(2, '0')
            api.getShow1({ code: 'show_3', dat: dataContainer.times }).then(res => {
                console.log(res)
                topTwo.value.data = res.dat.oneh.map(v => {
                    if (Array.isArray(v)) {
                        return v
                    } else {
                        return [0]
                    }

                })

                topOne.value.data = res.dat.plan.map(v => {
                    if (Array.isArray(v)) {
                        return v
                    } else {
                        return [0]
                    }
                })
                // topOne.value.data[4][23]=0
                dataInfo1.value.data = [res.dat.prc[0]]
                dataInfo2.value.data = [res.dat.prc[1]]
                dataInfo3.value.data = [res.dat.prc[2]]
                dataInfo4.value.data = [res.dat.prc[3]]
                dataInfo5.value.data = [res.dat.prc[4]]
                // select()
            })

        });
        let timer = setInterval(() => {
            computeRem();
        }, 300);
        window.addEventListener('resize', computeRem);
        onBeforeUnmount(() => {
            window.removeEventListener('resize', computeRem);
            window.clearInterval(timer);
        });
        return {
            dataContainer,
            ViewRef,
            dataInfo1,
            dataInfo2,
            dataInfo3,
            dataInfo4,
            dataInfo5,
            topOne,
            topTwo,
            hrefGo
        };
    },
});
</script>

<template>
    <el-scrollbar height="100vh">
        <div ref="ViewRef" class="big-screen-view">
            <div class="head">
                <ViewHead title="多能互补一体化调控平台">
                    <template #left>
                        <div class="yun-img">
                            <!-- <img src="@/assets/img-show2/yun.png" alt=""> -->
                            <!-- <span class="temp">多云</span> -->
                            <span class="numberC">日前-日内发电计划</span>
                            <!-- <span class="cs">&nbsp; ℃</span> -->
                        </div>
                    </template>
                    <template #right>
                        <div class="right-box">
                            <div class="right-box-item-title">{{ dataContainer.times }}</div>
                        </div>
                    </template>
                </ViewHead>
            </div>
            <div class="content">
                <div class="top" style="height: 18rem;">
                    <div class="title">日前发电计划</div>
                    <top_1 :dataInfo="topOne"></top_1>

                    <div class="textClass" @click="hrefGo('http://112.124.51.187:81/login.html')">发电计划管理</div>

                </div>
                <div class="top_two" style="height: 18rem;">
                    <div class="title">未来1h发电计划</div>
                    <top_1 :dataInfo="topTwo"></top_1>
                </div>
                <div class="top_three" style="height: 20rem;">
                    <div class="title">各电站电价</div>
                    <div class="list_echart">
                        <div class="xiao_box">
                            <brokenline v-if="dataInfo1.data.length" :dataInfo="dataInfo1"></brokenline>
                        </div>
                        <div class="xiao_box">
                            <brokenline v-if="dataInfo2.data.length" :dataInfo="dataInfo2"></brokenline>
                        </div>
                        <div class="xiao_box">
                            <brokenline v-if="dataInfo3.data.length" :dataInfo="dataInfo3"></brokenline>
                        </div>
                        <div class="xiao_box">
                            <brokenline v-if="dataInfo4.data.length" :dataInfo="dataInfo4"></brokenline>
                        </div>
                        <div class="xiao_box">
                            <brokenline v-if="dataInfo5.data.length" :dataInfo="dataInfo5"></brokenline>
                        </div>
                        <!-- <div class="xiao_box ">
                            <div class="textClass">上传电网调度中心</div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>

<style lang="scss" scoped>
.big-screen-view {
    /** 保持宽高比 */
    width: 100vw;
    height: calc(100vw / calc(1920 / 1080));
    overflow: hidden;
    background-color: #031045c7;
    display: flex;
    flex-direction: column;
    background-image: url('@/assets/images/bjdazong.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    .textClass {
        text-align: center;
        font-size: 1rem;
        color: #FFF;

        border: 0.063rem solid #65ddfd;
        height: 3.125rem;
        width: 10.500rem;
        line-height: 3.125rem;
        margin: 0 auto;
        // margin-top: 40%;
        position: absolute;
        right: 95px;
        top: 0px;
        cursor: pointer;
        a{color: #fff;}
    }

    >.head {
        height: 5.688rem;

        .yun-img {
            img {
                width: 2.250rem;
                height: 1.938rem;
            }

            .temp {
                color: #D8D8D8;
                font-size: 0.75rem;
            }

            .numberC {
                font-size: 1.5rem;
            }

            .cs {
                font-size: 1.125rem;
                font-weight: 200;
            }
        }

        .right-box-item-title {
            font-weight: 300;
        }

    }

    >.content {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        width: 100%;
        position: relative;
        >.top,
        .top_two,
        .top_three {
            width: 100%;
            height: 10.438rem;
            margin-top: 1.250rem;
            overflow: hidden;

            // flex: 1 1 0;
            // width: 37.500rem;
            >.title {
                color: #FFFFFF;
                font-size: 1rem;
                margin-left: 1rem;
                background: url('@/assets/img-show2/smallTitle.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
                height: 1.875rem;
                line-height: 1.875rem;
                width: 34rem;
                padding-left: 1rem;
            }

            .list_echart {
                margin: 0 1.000rem;
                margin-top: 1.250rem;
                display: flex;
                justify-content: space-between;

                .xiao_box {
                    height: 18.750rem;
                    width: 18%;
                    text-align: center;
                }


            }

        }
    }
}
</style>
